<template>
  <uni-nav-bar title="账户使用明细" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="datas">
    <uni-datetime-picker
      v-model="range"
      type="daterange"
      :border="false"
      :clear-icon="false"
      rangeSeparator="至"
      @change="change"
    />
  </view>
  <view class="package" style="padding: 0px;">
    <uni-segmented-control
      :current="current"
      :values="items"
      @clickItem="onClickItem"
      styleType="text"
      activeColor="#1B91FF"
    ></uni-segmented-control>
  </view>
  <!-- 加注列表 -->
  <view class="detail">
    <!-- 列表 -->
    <scroll-view
      scroll-y="true"
      enable-back-to-top
      @scrolltolower="loadMore"
      class="scroll-box"
      :style="{ height: pageHeight + 'px' }"
    >
      <FillingList :orderLists="orderLists" :status="false" v-if="current===0"></FillingList>
      <TakeOut :orderLists="orderLists" :status="false" v-else></TakeOut>
      <u-loadmore v-if="orderLists.length" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
      <view class="fillings" v-if="orderLists.length < 1" :style="{ height: pageHeight + 'px' }">
        <image :src="Empty2"></image>
        <text>暂无使用记录</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { fillingOrder,getOrderListByMoneyID } from '@/gql/filling';
import { getDriverID } from '@/stores/driverID';
import { navBack } from '@/utils/navigator';
import { showLoading } from '@/utils/prompt';
import FillingList from '@c/order/fillingList.vue';
import TakeOut from '@c/order/takeOut.vue';
import { onLoad } from '@dcloudio/uni-app';
import { Empty2} from '@/utils/Static';
import { toPublish } from '@mqtt';
import { format, subDays } from 'date-fns';
import type { Ref } from 'vue';
import { onMounted, ref } from 'vue';
// static
const driver_id = getDriverID();
const orderLists: Ref<object[]> = ref([]);
const items = ['加注单','外卖单'];
const current = ref(0);
// date
const now = new Date();
let end = format(now, 'yyyy-MM-dd');
const daysAgo = subDays(now, 6);
let start = format(daysAgo, 'yyyy-MM-dd');
const range: Ref<string[]> = ref([start, end]);
const isLoading = ref(true);
const loadStatus = ref('loadmore');
const currentPage = ref(0);
const lastPage = ref(1);
const pageHeight = ref('');

let accountID = null as number;

onMounted(() => {
  //获取可视区域的高度
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = (res.windowHeight - 160).toString();
    },
  });
});

onLoad((options) => {
  accountID = Number.parseInt(options.id);
  init();
});

function init() {
  showLoading('加载中');
   switch (current.value) {
     case 0:
      const payload = {
        query: fillingOrder,
        variables: {
          page: lastPage.value,
          start,
          end,
          cart_code: '',
          from_driver_id: driver_id,
          driver_id: accountID,
        },
      };
      toPublish('ql/driver/getEmpowerInfo', payload, (obj: any) => {
        const { data } = obj;
        isLoading.value = false;
        orderLists.value = [...orderLists.value, ...data.fill_order_list.list];
        currentPage.value = data.fill_order_list.lastpage;
        if (lastPage.value < data.fill_order_list.lastpage) {
          loadStatus.value = 'loadmore';
        } else {
          loadStatus.value = 'nomore';
        }
      });
       break;
       case 1:
         const payload1 = {
           query: getOrderListByMoneyID,
           variables: {
             page: lastPage.value,
             start,
             end,
             money_id: driver_id,
             driver_id: accountID,
           },
         };
         toPublish('ql/take/getOrderListByMoneyID', payload1, (obj: any) => {
           const { data } = obj;
           isLoading.value = false;
           orderLists.value = [...orderLists.value, ...data.getOrderListByMoneyID.list];
           currentPage.value = data.getOrderListByMoneyID.lastpage;
           if (lastPage.value < data.getOrderListByMoneyID.lastpage) {
             loadStatus.value = 'loadmore';
           } else {
             loadStatus.value = 'nomore';
           }
         });
         break;
   }

}
/**
 * 加载更多
 */
function loadMore() {
  if (lastPage.value < currentPage.value) {
    lastPage.value++;
    init();
  }
}
/**
 * @param {Object} e 订单分类状态
 */
function onClickItem(e:any) {
  current.value = e.currentIndex;
  lastPage.value = 1;
  orderLists.value = [];
  init()
}
/**
 * 时间筛选
 */
function change([sta, en]) {
  lastPage.value = 1;
  orderLists.value = [];
  start = sta;
  end = en;
  init();
}
</script>

<style scoped lang="less">
@import url('../authorized/less/orderAccounts.less');
</style>
<style>
.datas >>> .uni-date__x-input {
  font-size: 30rpx !important;
}
.datas >>> .uni-date-x {
  font-size: 30rpx !important;
}
.datas >>> .uni-icons {
  font-size: 48rpx !important;
}
</style>
